<template>
    <div class="sortable-table">
        <table class="table">
            <thead>
            <tr>
                <th v-for="column in columns" v-on:click="sortBy(column.slug)"  v-bind:class="{'active': sortKey == column.slug}">
                        {{ column.name }}
                    <i class="material-icons">expand_more</i>
                </th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="(object, index) in orderedArray">
                <td v-for="column in columns" v-html="object[column.slug]">
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    import axios from 'axios'

    export default {

        data() {
            return {
                sortKey: "id",
                reverse: false,


            }
        },

        computed: {
            columnNames: function(){
                return this.array[0];
            },
            orderedArray: function () {
                if (this.reverse){
                    return _.orderBy(this.array, this.sortKey).slice().reverse();
                } else {
                    return _.orderBy(this.array, this.sortKey);
                }
            }
        },
        mounted: function() {
            var self = this;


        },
        methods: {
            sortBy: function(sortKey) {
                this.reverse = (this.sortKey == sortKey) ? ! this.reverse : false;
                this.sortKey = sortKey;
            }
        },
        props:[
            'array',
            'columns'
        ]

    }
</script>